<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<!-- <view class="title">
				<text>手机号登录</text>
			</view>
			<view class="sub-title">
				<text>未注册的手机号登录后将自动注册</text>
			</view> -->
		</view>
		<!-- 表单 -->
		<view class="login-form">
			<!-- 手机号 -->
			<view class="form-item">
				<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
			</view>
			<!-- 图形验证码 -->
			<view class="form-item">
				<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
					placeholder="请输入图形验证码" />
				<view class="form-item--parts">
					<view class="captcha" @click="getCaptcha()">
						<image class="image" :src="showCaptcha"></image>
					</view>
				</view>
			</view>
			<!-- 短信验证码 -->
			<view class="form-item">
				<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
				<view class="form-item--parts flex-middle-center">
					<view class="captcha-sms" @click="handelSmsCaptcha()">
						<text v-if="!smsState" class="activate">获取验证码</text>
						<text v-else class="un-activate">重新发送({{ times }})秒</text>
					</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="login-button" @click="handleLogin">
				<text>登录</text>
			</view>
		</view>
		<view class="footer">
			<text class="other">其他登陆方式</text>
			
			<view class="login-type">
				<view class="login-weixin">
					<sl-image :value="searchLogo" mode="aspectFit"></sl-image>
				</view>
			</view>
			<text class="footer-text">
				未注册的手机号，验证后会自动创建星橘账号，登陆即代表您同意：用户隐私政策
			</text>
		</view>
	</view>
</template>

<script>
	import VerifyApi from '@/api/user/verify';
	import CaptchaApi from '@/api/user/captcha'
	import LoginApi from '@/api/user/login'
	import store from '@/store'
	import * as Verify from '@/utils/verify'

	// 倒计时时长(秒)
	const times = 60

	// 表单验证场景
	const GET_CAPTCHA = 10
	const SUBMIT_LOGIN = 20

	export default {
		props: {
			// 第三方用户信息数据
			login: {
				type: Object
			}
		},
		data() {
			return {
				searchLogo: 'https://orangestargame.oss-cn-shenzhen.aliyuncs.com/static/searchHead.png',
				// 正在加载
				isLoading: false,
				// 图形验证码信息
				captcha: {},
				// 图形验证码
				captchaCode: '',
				// 短信验证码发送状态
				smsState: false,
				// 倒计时
				times,
				// 手机号
				mobile: '',
				// 短信验证码信息
				smsCodeKey: '',
				// 短信验证码
				smsCode: ''
			}
		},

		computed: {
			showCaptcha: function() {
				if (this.captcha && this.captcha.base64) {
					return 'data:image/png;base64,' + this.captcha.base64;
				}
				return '';
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {
			// 获取图形验证码
			//this.getCaptcha()
		},

		/**
		 * 加载此页面时才执行
		 */
		mounted() {
			// 获取图形验证码
			this.getCaptcha()
		},

		methods: {

			// 获取图形验证码
			getCaptcha() {
				const app = this
				CaptchaApi.simple().then(result => app.captcha = result.obj || {})
			},

			// 点击发送短信验证码
			handelSmsCaptcha() {
				const app = this
				if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
					app.sendSmsCaptcha()
				}
			},

			// 表单验证
			formValidation(scene = GET_CAPTCHA) {
				const app = this
				// 验证获取短信验证码
				if (scene === GET_CAPTCHA) {
					if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
						return false
					}
				}
				// 验证提交登录
				if (scene === SUBMIT_LOGIN) {
					if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
						return false
					}
				}
				return true
			},

			// 验证手机号
			validteMobile(str) {
				if (Verify.isEmpty(str)) {
					this.$app.toast('请先输入手机号')
					return false
				}
				if (!Verify.isMobile(str)) {
					this.$app.toast('请输入正确格式的手机号')
					return false
				}
				return true
			},

			// 验证图形验证码
			validteCaptchaCode(str) {
				if (Verify.isEmpty(str)) {
					this.$app.toast('请先输入图形验证码')
					return false
				}
				return true
			},

			// 验证短信验证码
			validteSmsCode(str) {
				if (Verify.isEmpty(str)) {
					this.$app.toast('请先输入短信验证码')
					return false
				}
				return true
			},

			// 请求发送短信验证码接口
			sendSmsCaptcha() {
				const app = this
				app.isLoading = true
				VerifyApi.login({
						phone: app.mobile,
						captcha: app.captchaCode
					}, app.captcha.token)
					.then(res => {
						if (res.success) {
							// 保存短信验证码的信息
							app.smsCodeKey = res.obj.key;
							// 显示发送成功
							app.$app.toast('发送成功！')
							// 执行定时器
							app.timer()
						} else if (res.code === 30001) {
							app.$app.error('图形验证码错误！')
						} else {
							app.$app.error(res.msg || '发送验证码错误，请重试！')
						}
					}).finally(() => app.isLoading = false)
			},

			// 执行定时器
			timer() {
				const app = this
				app.smsState = true
				const inter = setInterval(() => {
					app.times = app.times - 1
					if (app.times <= 0) {
						app.smsState = false
						app.times = times
						clearInterval(inter)
					}
				}, 1000)
			},

			// 点击登录
			handleLogin() {
				const app = this
				if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
					app.submitLogin()
				}
			},

			// 确认登录
			submitLogin() {
				const app = this
				app.isLoading = true
				let login = {
					name: app.login.name || '',
					headimg: app.login.headimg || '',
					phone: app.mobile,
					smsCode: app.smsCode,
					appId: app.login.appId || '',
					openId: app.login.openId || '',
					unionId: app.login.unionId || '',
					account: app.login.account || 'UserName'
				}
				store.dispatch('Login', {
					smsCodeKey: app.smsCodeKey,
					login
				}).then(result => {
					// 显示登录成功
					app.$app.toast('登陆成功')

					// 跳转回原页面
					setTimeout(() => {
						app.onNavigateBack(1)
					}, 1000)
				}).catch((err) => {
					app.$app.error(err.msg)
				}).finally(() => app.isLoading = false)
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta) {
				let to = this.$store.getters.to;
				if (to && to.route) {
					this.$app.redirectTo(to.route, to.param)
				} else {
					this.$app.redirectTo('pages/index/index')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 100rpx 80rpx;
		background-color: #fff;
	}

	// 页面头部
	.header {
		margin-bottom: 50rpx;

		.title {
			color: #191919;
			font-size: 50rpx;
		}

		.sub-title {
			margin-top: 20rpx;
			color: #b3b3b3;
			font-size: 25rpx;
		}
	}

	// 输入框元素
	.form-item {
		display: flex;
		padding: 18rpx;
		border-bottom: 1rpx solid #f3f1f2;
		margin-bottom: 25rpx;
		height: 96rpx;

		&--input {
			font-size: $uni-font-size-base;
			letter-spacing: 1rpx;
			flex: 1;
			height: 100%;
		}

		&--parts {
			min-width: 100rpx;
			height: 100%;
		}

		// 图形验证码
		.captcha {
			height: 100%;

			.image {
				display: block;
				width: 192rpx;
				height: 100%;
			}
		}

		// 短信验证码
		.captcha-sms {
			font-size: 22rpx;
			line-height: 50rpx;

			.activate {
				color: #F7441D;
			}

			.un-activate {
				color: #9e9e9e;
			}
		}
	}

	// 登录按钮
	.login-button {
		width: 100%;
		height: 84rpx;
		margin-top: 70rpx;
		background: linear-gradient(118.17deg, #FEA370 0%, #FE2406 95.01%);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		border-radius: 16rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
	}
	.footer{
		margin-top: 100rpx;
		text-align: center;
		.other{
			position: relative;
			padding-left: 20rpx;
			padding-right: 20rpx;
			color: gray;
			&::after{
				display: block;
				content: "";
				width: 100%;
				height: 2rpx;
				background-color: gray;
				position: absolute;
				top: 50%;
				left: -100%;
				transform: translateY(-50%);
			}
			&::before{
				display: block;
				content: "";
				width: 100%;
				height: 2rpx;
				background-color: gray;
				position: absolute;
				top: 50%;
				right: -100%;
				transform: translateY(-50%);
			}
		}
		.login-type{
			display: flex;
			margin: 0 auto;
			justify-content: space-around;
			margin-top: 10rpx;
			.login-weixin{
				position: relative;
				width: 60rpx;
				height: 60rpx;
			}
			
		}
		.footer-text{
			
		}
		
	}
</style>